<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Flex Items: align-content</title>
    <style contenteditable>
        html {
            font-size: 1.6em;
        }

        body {
            font-size: 25px;
            text-align: center;
            padding: 100px;
        }

        div,
        div>p {
            background-color: rgba(0, 0, 0, 0.1);
        }

        article>div {
            display: flex;
            flex-direction: row;
            border: 1px dashed;
        }

        div>p {
            border: 1px solid;
            margin: 5px;
            padding: 5px;
        }

        p {
            margin: 0 -20px 40px;
        }

        div p {
            margin: 5px;
        }

        div p:nth-of-type(1) {
            font-size: 1.4rem;
        }

        div p:nth-of-type(2) {
            font-size: 1.2rem;
        }

        div p:nth-of-type(3) {
            font-size: 1.0rem;
        }

        div p:nth-of-type(4) {
            font-size: 0.8rem;
        }

        div p:nth-of-type(5) {
            font-size: 0.7rem;
        }
    </style>
</head>

<body>
    <article>

        <div style="align-items: flex-start;">
            <p>
                One
            </p>
            <p>
                Two
                <br/> Two
            </p>
            <p>
                Three
                <br/> Three
                <br/> Three
            </p>
            <p>
                Four
                <br/> Four
                <br/> Four
                <br/> Four
            </p>
            <p>
                Five
                <br/> Five
                <br/> Five
                <br/> Five
                <br/> Five
            </p>
        </div>

        <p>align-items: flex-start; ⤴</p>

    </article>




    <article>

        <div style="align-items: flex-end;">
            <p>
                One
            </p>
            <p>
                Two
                <br/> Two
            </p>
            <p>
                Three
                <br/> Three
                <br/> Three
            </p>
            <p>
                Four
                <br/> Four
                <br/> Four
                <br/> Four
            </p>
            <p>
                Five
                <br/> Five
                <br/> Five
                <br/> Five
                <br/> Five
            </p>
        </div>
        <p>align-items: flex-end; ⤴</p>
    </article>




    <article>


        <div style="align-items: center;">
            <p>
                One
            </p>
            <p>
                Two
                <br/> Two
            </p>
            <p>
                Three
                <br/> Three
                <br/> Three
            </p>
            <p>
                Four
                <br/> Four
                <br/> Four
                <br/> Four
            </p>
            <p>
                Five
                <br/> Five
                <br/> Five
                <br/> Five
                <br/> Five
            </p>
        </div>

        <p>align-items: center; ⤴</p>
    </article>




    <article>


        <div style="align-items: baseline;">
            <p>
                One
            </p>
            <p>
                Two
                <br/> Two
            </p>
            <p>
                Three
                <br/> Three
                <br/> Three
            </p>
            <p>
                Four
                <br/> Four
                <br/> Four
                <br/> Four
            </p>
            <p>
                Five
                <br/> Five
                <br/> Five
                <br/> Five
                <br/> Five
            </p>
        </div>

        <p>align-items: baseline; ⤴</p>
    </article>




    <article>



        <div style="align-items: stretch;">
            <p>
                One
            </p>
            <p>
                Two
                <br/> Two
            </p>
            <p>
                Three
                <br/> Three
                <br/> Three
            </p>
            <p>
                Four
                <br/> Four
                <br/> Four
                <br/> Four
            </p>
            <p>
                Five
                <br/> Five
                <br/> Five
                <br/> Five
                <br/> Five
            </p>
        </div>

        <p>align-items: stretch; ⤴</p>
    </article>

</body>

</html>